<template>
  <div class="upload-wrapper d-flex al-end t-light">
    <div v-if="disabled" class="mask p-a cursor-not-allowed" :style="boxStyle" click.prevent></div>
    <vue-core-image-upload
      :crop="false"
      :data="pictureData"
      :max-file-size="5242880"
      url="your server url"
      @imageuploaded="imageuploaded"
    >
      <div class="upload-image bd-filt pointer" :style="boxStyle" :class="{ 'bgc-ash': disabled }">
        <i v-show="imgUrl && clearable" class="el-icon-error" @click.stop="$emit('update:imgUrl', '')" />
        <img v-if="imgUrl" class="img-preview fulled-h fulled-w" :src="getImageUrl(imgUrl)" />
        <div v-else class="upload-area d-flex flex-column jc-center al-center m-center" :style="uploadAreaStyle">
          <SvgIcon icon-class="picture" class="fs-xl"></SvgIcon>
          <div class="mt-5">添加图片</div>
        </div>
      </div>
    </vue-core-image-upload>

    <div class="tip ml-12">
      <slot name="tip"></slot>
    </div>
  </div>
</template>

<script>
  import { getImageUrl } from '@/utils';
  import VueCoreImageUpload from 'vue-core-image-upload';

  export default {
    name: 'PictureMaterialSelector',

    components: {
      VueCoreImageUpload
    },

    props: {
      // 图片链接
      imgUrl: {
        type: String,
        default: ''
      },
      // 图片类型限制
      imgType: {
        type: Array,
        default: () => ['png', 'jpg', 'jpeg', 'gif']
      },
      // 图片宽度限制
      imgWidth: {
        type: Number,
        default: 0
      },
      // 图片高度限制
      imgHeight: {
        type: Number,
        default: 0
      },
      // 图片宽度比例限制
      imgWidthRatio: {
        type: Number,
        default: 0
      },
      // 图片高度比例限制
      imgHeightRatio: {
        type: Number,
        default: 0
      },
      // 限制图片大小，默认99M
      imgSize: {
        type: Number,
        default: 99
      },
      // 组件的固定宽度
      width: {
        type: Number,
        default: null
      },
      // 组件的固定高度
      height: {
        type: Number,
        default: null
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // 是否能够清除
      clearable: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        dialogType: '',
        pictureData: {}
      };
    },

    computed: {
      // ...mapGetters('user'),
      boxStyle() {
        return {
          width: `${((this.width || 120) / 100).toFixed(2)}rem`,
          height: `${((this.height || 120) / 100).toFixed(2)}rem`
        };
      },
      uploadAreaStyle() {
        const w = this.width || this.height || 120;
        const h = this.height || this.width || 120;
        return {
          width: `${(w / 100).toFixed(2)}rem`,
          height: `${(h / 100).toFixed(2)}rem`
        };
      }
    },

    methods: {
      getImageUrl,
      imageuploaded(res) {
        console.log(1111);
        if (res.errcode === 0) {
          this.src = 'http://img1.vued.vanthink.cn/vued751d13a9cb5376b89cb6719e86f591f3.png';
        }
      },
      openPictureMaterial() {
        if (this.disabled) return;
        this.dialogType = 'pictureMaterial';
      },

      // 选中上传的图片
      onSucceed(url) {
        this.$emit('update:imgUrl', url);
        this.$emit('success');
      }
    }
  };
</script>

<style lang="scss" scoped>
  .upload-wrapper {
    .upload-image {
      position: relative;

      .img-preview {
        object-fit: contain;
        object-position: center;
      }

      .el-icon-error {
        position: absolute;
        top: 5px;
        right: 5px;
      }

      .upload-area {
        line-height: 1;
      }

      &.bgc-ash {
        background-color: #eee;
      }
    }

    .mask {
      z-index: 1;
      background-color: rgba(255, 255, 255, 0.5);
    }

    .tip {
      margin-top: 8px;
      line-height: 1;
    }
  }
</style>
